<template>
    <el-container class="layout-container-demo" >
      <MyAside></MyAside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;border-bottom: lightblue 1px solid;">
          <MyHeader></MyHeader>
        </el-header>
        <el-main>         
          <!--<myMain></myMain>-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </template>
  <script lang="ts" setup>
  import MyAside from './myAside.vue';
  import MyHeader from './myHeader.vue';
  import MyMain from './myMain.vue';
  </script>
  <style scoped>
  .layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }
  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
  }
  .layout-container-demo .el-menu {
    border-right: none;
  }
  .layout-container-demo .el-main {
    padding: 0;
  }
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
  }
  </style>
  